<!--
  功能：表单图片
  时间：2023年03月16日 15:22:48
-->
<template>
  <div class="flex">
    <!-- 图片列表 多张 -->
    <draggable
      v-if="props.max > 1"
      class="list-group flex"
      tag="transition-group"
      :component-data="{
        tag: 'div',
        type: 'transition-group',
        name: !drag ? 'flip-list' : null,
      }"
      v-model="img"
      v-bind="dragOptions"
      @start="drag = true"
      @end="drag = false"
      item-key="v"
    >
      <template #item="{ element, index }">
        <div class="v1 flex" :style="boxSize">
          <el-image
            style="width: 100%; height: 100%"
            :src="config.serverImg + element"
            :preview-src-list="preview()"
            :initial-index="index"
            fit="contain"
          ></el-image>
          <div class="v2 flex">
            <div @click="delFun(index)">
              <i class="custom-icon custom-icon-trash"></i>
            </div>
            <div @click="emit('pickImg', index)">
              <i class="custom-icon custom-icon-tihuan"></i>
            </div>
          </div>
        </div>
      </template>
    </draggable>

    <!-- 图片列表 单张 -->
    <div class="v1 flex" :style="boxSize" v-if="props.max === 1 && img.length">
      <el-image
        style="width: 100%; height: 100%"
        :src="config.serverImg + img[0]"
        fit="contain"
        :preview-src-list="preview()"
      ></el-image>
      <div class="v2 flex">
        <div @click="delFun(0)">
          <i class="custom-icon custom-icon-trash"></i>
        </div>
        <div @click="emit('pickImg')">
          <i class="custom-icon custom-icon-tihuan"></i>
        </div>
      </div>
    </div>

    <!-- 选择图片 -->
    <div
      class="v3"
      :style="boxSize"
      @click="emit('pickImg')"
      v-if="img.length < props.max"
    >
      <i class="custom-icon custom-icon-jia_sekuai"></i>
    </div>
  </div>
</template>

<script lang="ts" setup>
import draggable from "vuedraggable"; //拖拽组件配置信息
import config from "@/common/config";

const emit = defineEmits<{
  (e: "update:modelValue", data: any): void; //向父组件更新排序或删除的数据
  (e: "pickImg", data?: number): void; //向父组件传递状态 需要选择图片
}>();

interface IProps {
  modelValue: string[] | string;
  max?: number;
  height?: number | string;
  width?: number | string;
}
const props = withDefaults(defineProps<IProps>(), {
  modelValue: () => "", //图片数组
  max: () => 1, //最大选择数量
  width: () => 120, //组件宽度
  height: () => 120, //组件高度
});

const boxSize = computed(() => {
  return `width:${props.width}px;height:${props.height}px;line-height:${props.height}px;'`;
});

//根据max参数 判断 是数组 还是 字符串
const img = computed(() => {
  let arr: string[];
  if (props.max == 1) {
    arr = props.modelValue ? [props.modelValue as string] : [];
  } else {
    arr = props.modelValue as string[];
  }
  return arr;
});

function delFun(index: number) {
  img.value.splice(index, 1);
  emit("update:modelValue", props.max == 1 ? img.value[0] : img.value);
}

//图片预览数据处理
function preview() {
  return img.value.map((v) => config.serverImg + v);
}

const drag = ref(false);
const dragOptions = {
  animation: 200,
  group: "description",
  disabled: false,
  ghostClass: "ghost",
};
</script>

<style scoped lang="scss">
.v1 {
  margin-right: 10px;
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed #d9d9d9;
}

.v1:hover {
  border-color: var(--el-color-primary);
}

.v1:hover .v2 {
  opacity: 1;
}

.v1 img {
  width: 100%;
  height: 100%;
  display: block;
}

.v2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: 0.3s;
  text-align: center;
  color: #fff;
  height: 40px;

  > div {
    height: 40px;
    width: 50%;
    line-height: 40px;
    cursor: pointer;
    text-align: center;

    &:hover i {
      color: var(--el-color-primary);
    }
  }

  i {
    width: 50%;
    font-size: 21px;
    text-align: center;
  }

  i.custom-icon-trash {
    font-size: 19px;
  }
}

.v3 {
  height: 120px;
  width: 120px;
  line-height: 120px;
  margin-right: 10px;
  text-align: center;
  border: 1px dashed #ccc;
  border-radius: 5px;
  cursor: pointer;

  i {
    color: #777;
    font-size: 20px;
  }

  &:hover {
    border-color: var(--el-color-primary);
  }

  &:hover i {
    color: var(--el-color-primary);
  }
}
</style>
